<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
        flex布局-侧轴对齐
        flex-direction: row;这个属性只能设置主轴是那个,要不是行要不是列,只能二选一.
        align-items是处理侧轴排序的,它要看flex-direction的属性,flex-direction是行那么侧轴就是列,如果flex-direction是列,那么侧轴就是行
        假设现在有3个盒子,如果主轴是row那么这三个盒子紧贴着父盒子上边缘在水平方向上排列,如是column这三个盒子就紧贴着父盒子的左边缘垂直排列.
        如果我现在想让这三个盒子在父盒子里边居中,不贴着左侧和上侧的边缘线是做不到的,align-items可以做到
        注意下面代码里边的三个盒子还是在水平方向上排列的,因为flex-direction: row;默认值就是row,而align-items使它不在紧贴父盒子上边缘线
    */

    .box {
        /* 设置flex布局 */
        display: flex;
        /*注意这里的主轴还是row,并没有改成侧轴,下面的代码实现了侧轴排序*/
        flex-direction: row;
        justify-content: space-around;

        /* 从起点开始依次排列 */
        /* align-items: flex-start; */
        /* 从终点位置依次排列 */
        /*align-items: flex-end;*/
        /* 居中排列 使用较多*/
        align-items: center;

        /*拉伸子盒子和父盒子一样高, 前提是子盒子不能设置高度 很少用*/
        /*align-items: stretch;*/

        /*盒子模型*/
        width: 1000px;
        height: 400px;
        border: 1px solid black;
        margin: 100px auto;
    }

    .one {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .two {
        width: 200px;
        height: 200px;
        background-color: rgb(192, 33, 60);
    }

    .three {
        width: 200px;
        height: 200px;
        background-color: rgb(20, 199, 29);
    }

</style>

<body>
<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>

</html>